<!--
 * @Descripttion: 流程配置-表单设计-签名组件
 * @version:
 * @Company: 广州工程建设监理系统
 * @Author: WYH
 * @Date: 2022-09-02 10:27:26
 * @LastModifiedTime:
-->
<template>
    <div class="signature-box">
        <!-- v-model="formData[formData.valueName]"
               :disabled="formStatus === 'info'" -->
        <div class="labelContent" v-if="formStatus === 'edit'">
            <VueSignaturePad id="signature" ref="signaturePad" width="100%" height="200px" :options="options" :key="updateStyle" />
            <div class="buttons">
                <el-button size="mini" @click="undo">撤销</el-button>
                <el-button size="mini" @click="clear">清空</el-button>
            </div>
        </div>
        <div v-else>
            <el-image v-if="formData[formData.valueName]" :preview-src-list="[formData[formData.valueName]]"
                :src="formData[formData.valueName]" :style="{
                    height: formData.approvalForZhang ? '120px' : '200px',
                    width: formData.approvalForZhang ? 'auto' : '100%'
                }" />
            <div v-else>暂无签名</div>
        </div>
    </div>
</template>

<script setup name="signatureBox">
import { onMounted } from 'vue'
const props = defineProps({
  formData: {
    type: Object,
    default: () => { },
    required: true
  },
  formStatus: {
    type: String,
    default: 'edit'
  }
})
const options = reactive({
  penColor: '#000',
  onEnd: handleEnd
})
const currentCpn = getCurrentInstance()
const updateStyle = ref(false)

onMounted(() => {
  updateStyle.value = true
})

async function handleEnd () {
  await nextTick(() => { })
  const { isEmpty, data } = currentCpn.refs.signaturePad.saveSignature()
  if (isEmpty) {
    const rows = props.formData.valueName
    Object.assign(props.formData, {
      [rows]: ''
    })
  } else {
    console.log('data1=>', currentCpn.refs.signaturePad)
    const rows = props.formData.valueName
    Object.assign(props.formData, {
      [rows]: data
    })
  }
}
// 撤销
async function undo () {
  currentCpn.refs.signaturePad.undoSignature()
  await nextTick(() => { })
  const { isEmpty, data } = currentCpn.refs.signaturePad.saveSignature()
  if (isEmpty) {
    const rows = props.formData.valueName
    Object.assign(props.formData, {
      [rows]: ''
    })
  } else {
    const rows = props.formData.valueName
    Object.assign(props.formData, {
      [rows]: data
    })
  }
}
// 清空
async function clear () {
  currentCpn.refs.signaturePad.clearSignature()
  await nextTick(() => { })
  const rows = props.formData.valueName
  Object.assign(props.formData, {
    [rows]: ''
  })
}
</script>

<style lang="scss" scoped>
.signature-box {
    width: 100%;

    #signature {
        border: 1px solid #CCC;
    }

    .labelContent {
        width: 100%;

        .buttons {
            text-align: center;
            margin-top: 12px;
        }
    }
}
</style>
